ரியாக்ட் கன்கரென்ட் ரெண்டரிங்: உகந்த செயல்திறனுக்காக ஃபிரேம் டிராப்பிங்கை புரிந்துகொண்டு தணித்தல்

ரியாக்டின் கன்கரென்ட் ரெண்டரிங் என்பது இணையச் செயலிகளின் வினைத்திறன் மற்றும் உணரப்பட்ட செயல்திறனை மேம்படுத்துவதற்காக வடிவமைக்கப்பட்ட ஒரு சக்திவாய்ந்த அம்சமாகும். இது மெயின் த்ரெட்டைத் தடுக்காமல், ஒரே நேரத்தில் பல பணிகளில் வேலை செய்ய ரியாக்டை அனுமதிக்கிறது, இது மென்மையான பயனர் இடைமுகங்களுக்கு வழிவகுக்கிறது. இருப்பினும், கன்கரென்ட் ரெண்டரிங் இருந்தாலும், செயலிகள் ஃபிரேம் டிராப்பிங்கை சந்திக்க நேரிடலாம், இதன் விளைவாக சீரற்ற அனிமேஷன்கள், தாமதமான தொடர்புகள் மற்றும் பொதுவாக ஒரு மோசமான பயனர் அனுபவம் ஏற்படுகிறது. இந்தக் கட்டுரை ரியாக்டின் கன்கரென்ட் ரெண்டரிங்கின் நுணுக்கங்களை ஆராய்கிறது, ஃபிரேம் டிராப்பிங்கிற்கான காரணங்களை ஆராய்கிறது, மேலும் இந்த சிக்கல்களைக் கண்டறிந்து தணிப்பதற்கான நடைமுறை உத்திகளை வழங்குகிறது, இது உலகளாவிய பார்வையாளர்களுக்கு உகந்த செயல்திறனை உறுதி செய்கிறது.

ரியாக்ட் கன்கரென்ட் ரெண்டரிங்கை புரிந்துகொள்ளுதல்

பாரம்பரிய ரியாக்ட் ரெண்டரிங் ஒத்திசைவாக செயல்படுகிறது, அதாவது ஒரு காம்பொனென்ட் புதுப்பிக்கப்பட வேண்டியிருக்கும் போது, முழு ரெண்டரிங் செயல்முறையும் முடியும் வரை மெயின் த்ரெட்டைத் தடுக்கிறது. இது தாமதங்கள் மற்றும் வினைத்திறன் இன்மைக்கு வழிவகுக்கும், குறிப்பாக பெரிய காம்பொனென்ட் மரங்களைக் கொண்ட சிக்கலான செயலிகளில். ரியாக்ட் 18 இல் அறிமுகப்படுத்தப்பட்ட கன்கரென்ட் ரெண்டரிங், ரெண்டரிங்கை சிறிய, குறுக்கிடக்கூடிய பணிகளாக உடைக்க ரியாக்டை அனுமதிப்பதன் மூலம் மிகவும் திறமையான அணுகுமுறையை வழங்குகிறது.

முக்கிய கருத்துக்கள்

• டைம் ஸ்லைசிங் (Time Slicing): ரியாக்ட் ரெண்டரிங் வேலையை சிறிய பகுதிகளாகப் பிரிக்கலாம், ஒவ்வொரு பகுதிக்குப் பிறகும் பிரவுசருக்கு கட்டுப்பாட்டைத் திருப்பிக் கொடுக்கும். இது பயனர் உள்ளீடு மற்றும் அனிமேஷன் புதுப்பிப்புகள் போன்ற பிற பணிகளைக் கையாள பிரவுசரை அனுமதிக்கிறது, UI முடங்குவதைத் தடுக்கிறது.
• குறுக்கீடுகள் (Interruptions): பயனர் தொடர்பு போன்ற உயர் முன்னுரிமைப் பணி கையாளப்பட வேண்டியிருந்தால், ரியாக்ட் நடந்துகொண்டிருக்கும் ரெண்டரிங் செயல்முறையை குறுக்கிடலாம். இது செயலி பயனர் செயல்களுக்கு வினைத்திறனுடன் இருப்பதை உறுதி செய்கிறது.
• சஸ்பென்ஸ் (Suspense): சஸ்பென்ஸ், தரவு ஏற்றப்படும் வரை காம்பொனென்ட்கள் ரெண்டரிங்கை "நிறுத்தி வைக்க" அனுமதிக்கிறது. தரவு கிடைக்கும் வரை ரியாக்ட் ஒரு லோடிங் இன்டிகேட்டர் போன்ற ஒரு ஃபால்பேக் UI-ஐக் காட்டலாம். இது தரவுக்காகக் காத்திருக்கும்போது UI-ஐத் தடுப்பதைத் தடுக்கிறது, உணரப்பட்ட செயல்திறனை மேம்படுத்துகிறது.
• டிரான்சிஷன்கள் (Transitions): டிரான்சிஷன்கள் டெவலப்பர்களை சில புதுப்பிப்புகளை குறைந்த அவசரமானதாகக் குறிக்க அனுமதிக்கின்றன. ரியாக்ட் டிரான்சிஷன்களை விட அவசரமான புதுப்பிப்புகளுக்கு (நேரடி பயனர் தொடர்புகள் போன்றவை) முன்னுரிமை அளிக்கும், இது செயலி வினைத்திறனுடன் இருப்பதை உறுதி செய்கிறது.

இந்த அம்சங்கள் அனைத்தும் ஒன்றுசேர்ந்து ஒரு திரவ மற்றும் வினைத்திறன் மிக்க பயனர் அனுபவத்திற்கு பங்களிக்கின்றன, குறிப்பாக அடிக்கடி புதுப்பிப்புகள் மற்றும் சிக்கலான UI-களைக் கொண்ட செயலிகளில்.

ஃபிரேம் டிராப்பிங் என்றால் என்ன?

பிரவுசரால் விரும்பிய ஃபிரேம் விகிதத்தில், பொதுவாக வினாடிக்கு 60 ஃபிரேம்கள் (FPS) அல்லது அதற்கும் அதிகமாக ஃபிரேம்களை ரெண்டர் செய்ய முடியாதபோது ஃபிரேம் டிராப்பிங் ஏற்படுகிறது. இது புலப்படும் தடுமாற்றங்கள், தாமதங்கள் மற்றும் பொதுவாக ஒரு குழப்பமான பயனர் அனுபவத்தை விளைவிக்கிறது. ஒவ்வொரு ஃபிரேமும் ஒரு குறிப்பிட்ட நேரத்தில் UI-இன் ஒரு ஸ்னாப்ஷாட்டை பிரதிபலிக்கிறது. பிரவுசரால் திரையை போதுமான அளவு விரைவாகப் புதுப்பிக்க முடியாவிட்டால், அது ஃபிரேம்களைத் தவிர்க்கிறது, இது இந்த காட்சி குறைபாடுகளுக்கு வழிவகுக்கிறது.

60 FPS என்ற இலக்கு ஃபிரேம் விகிதம் ஒரு ஃபிரேமுக்கு சுமார் 16.67 மில்லி விநாடிகள் என்ற ரெண்டரிங் பட்ஜெட்டைக் குறிக்கிறது. ஒரு ஃபிரேமை ரெண்டர் செய்ய பிரவுசர் இதை விட அதிக நேரம் எடுத்தால், ஒரு ஃபிரேம் கைவிடப்படுகிறது.

ரியாக்ட் செயலிகளில் ஃபிரேம் டிராப்பிங்கிற்கான காரணங்கள்

கன்கரென்ட் ரெண்டரிங்கைப் பயன்படுத்தும் போதும் கூட, ரியாக்ட் செயலிகளில் ஃபிரேம் டிராப்பிங்கிற்கு பல காரணிகள் பங்களிக்கக்கூடும்:

• சிக்கலான காம்பொனென்ட் புதுப்பிப்புகள்: பெரிய மற்றும் சிக்கலான காம்பொனென்ட் மரங்களை ரெண்டர் செய்ய குறிப்பிடத்தக்க நேரம் ஆகலாம், இது கிடைக்கும் ஃபிரேம் பட்ஜெட்டை மீறுகிறது.
• அதிக செலவுள்ள கணக்கீடுகள்: ரெண்டரிங் செயல்முறைக்குள் சிக்கலான தரவு மாற்றங்கள் அல்லது பட செயலாக்கம் போன்ற கணக்கீட்டு ரீதியாக தீவிரமான பணிகளைச் செய்வது மெயின் த்ரெட்டைத் தடுக்கலாம்.
• மேம்படுத்தப்படாத DOM கையாளுதல்: அடிக்கடி அல்லது திறமையற்ற DOM கையாளுதல் ஒரு செயல்திறன் தடையாக இருக்கலாம். ரியாக்டின் ரெண்டரிங் சுழற்சிக்கு வெளியே DOM-ஐ நேரடியாகக் கையாளுவது முரண்பாடுகள் மற்றும் செயல்திறன் சிக்கல்களுக்கு வழிவகுக்கும்.
• அதிகப்படியான ரீ-ரெண்டர்கள்: தேவையற்ற காம்பொனென்ட் ரீ-ரெண்டர்கள் கூடுதல் ரெண்டரிங் வேலையைத் தூண்டலாம், இது ஃபிரேம் டிராப்பிங் நிகழ்தகவை அதிகரிக்கிறது. இது பெரும்பாலும் `React.memo`, `useMemo`, `useCallback` ஆகியவற்றின் தவறான பயன்பாடு அல்லது `useEffect` ஹூக்குகளில் தவறான டிபென்டென்சி அரேக்களால் ஏற்படுகிறது.
• மெயின் த்ரெட்டில் நீண்ட நேரம் இயங்கும் பணிகள்: நெட்வொர்க் கோரிக்கைகள் அல்லது ஒத்திசைவான செயல்பாடுகள் போன்ற நீட்டிக்கப்பட்ட காலத்திற்கு மெயின் த்ரெட்டைத் தடுக்கும் ஜாவாஸ்கிரிப்ட் குறியீடு, பிரவுசர் ஃபிரேம்களைத் தவறவிடச் செய்யலாம்.
• மூன்றாம் தரப்பு லைப்ரரிகள்: திறமையற்ற அல்லது மோசமாக மேம்படுத்தப்பட்ட மூன்றாம் தரப்பு லைப்ரரிகள் செயல்திறன் தடைகளை அறிமுகப்படுத்தலாம் மற்றும் ஃபிரேம் டிராப்பிங்கிற்கு பங்களிக்கலாம்.
• பிரவுசர் வரம்புகள்: திறமையற்ற கார்பேஜ் கலெக்ஷன் அல்லது மெதுவான CSS கணக்கீடுகள் போன்ற சில பிரவுசர் அம்சங்கள் அல்லது வரம்புகள் ரெண்டரிங் செயல்திறனைப் பாதிக்கலாம். இது வெவ்வேறு பிரவுசர்கள் மற்றும் சாதனங்களில் வேறுபடலாம்.
• சாதன வரம்புகள்: செயலிகள் உயர்நிலை சாதனங்களில் சிறப்பாகச் செயல்படலாம், ஆனால் பழைய அல்லது குறைந்த சக்திவாய்ந்த சாதனங்களில் ஃபிரேம் டிராப்களால் பாதிக்கப்படலாம். பலதரப்பட்ட சாதனத் திறன்களுக்கு மேம்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.

ஃபிரேம் டிராப்பிங்கைக் கண்டறிதல்: கருவிகள் மற்றும் நுட்பங்கள்

ஃபிரேம் டிராப்பிங்கை சரிசெய்வதற்கான முதல் படி, அதன் இருப்பைக் கண்டறிந்து அதன் மூல காரணங்களைப் புரிந்துகொள்வதாகும். பல கருவிகள் மற்றும் நுட்பங்கள் இதற்கு உதவக்கூடும்:

ரியாக்ட் ப்ரொஃபைலர்

ரியாக்ட் டெவ்டூல்ஸில் கிடைக்கும் ரியாக்ட் ப்ரொஃபைலர், ரியாக்ட் காம்பொனென்ட்களின் செயல்திறனைப் பகுப்பாய்வு செய்வதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இது ரெண்டரிங் செயல்திறனைப் பதிவுசெய்யவும், ரெண்டர் செய்ய அதிக நேரம் எடுக்கும் காம்பொனென்ட்களைக் கண்டறியவும் உங்களை அனுமதிக்கிறது.

ரியாக்ட் ப்ரொஃபைலரைப் பயன்படுத்துதல்:

1. உங்கள் பிரவுசரில் ரியாக்ட் டெவ்டூல்ஸைத் திறக்கவும்.
2. "Profiler" தாவலைத் தேர்ந்தெடுக்கவும்.
3. ப்ரொஃபைலிங்கைத் தொடங்க "Record" பொத்தானைக் கிளிக் செய்யவும்.
4. நீங்கள் பகுப்பாய்வு செய்ய விரும்பும் ரெண்டரிங் செயல்முறையைத் தூண்டுவதற்கு உங்கள் செயலியுடன் தொடர்பு கொள்ளுங்கள்.
5. ப்ரொஃபைலிங்கை நிறுத்த "Stop" பொத்தானைக் கிளிக் செய்யவும்.
6. செயல்திறன் தடைகளைக் கண்டறிய பதிவுசெய்யப்பட்ட தரவைப் பகுப்பாய்வு செய்யவும். "ranked" மற்றும் "flamegraph" காட்சிகளுக்கு கவனம் செலுத்துங்கள்.

பிரவுசர் டெவலப்பர் கருவிகள்

பிரவுசர் டெவலப்பர் கருவிகள் இணைய செயல்திறனைப் பகுப்பாய்வு செய்வதற்கு பல்வேறு அம்சங்களை வழங்குகின்றன, அவற்றுள்:

• செயல்திறன் தாவல் (Performance Tab): செயல்திறன் தாவல், ரெண்டரிங், ஸ்கிரிப்டிங் மற்றும் நெட்வொர்க் கோரிக்கைகள் உட்பட பிரவுசர் செயல்பாட்டின் காலவரிசையைப் பதிவுசெய்ய உங்களை அனுமதிக்கிறது. இது ரியாக்டிற்கு வெளியே நீண்ட நேரம் இயங்கும் பணிகள் மற்றும் செயல்திறன் தடைகளைக் கண்டறிய உதவுகிறது.
• வினாடிக்கு ஃபிரேம்கள் (FPS) மீட்டர்: FPS மீட்டர் ஃபிரேம் விகிதத்தின் நிகழ்நேர அறிகுறியை வழங்குகிறது. FPS-இல் ஏற்படும் வீழ்ச்சி சாத்தியமான ஃபிரேம் டிராப்பிங்கைக் குறிக்கிறது.
• ரெண்டரிங் தாவல் (Rendering Tab): ரெண்டரிங் தாவல் (குரோம் டெவ்டூல்ஸில்) திரையின் மீண்டும் வரையப்படும் பகுதிகளை முன்னிலைப்படுத்தவும், லேஅவுட் ஷிஃப்ட்களைக் கண்டறியவும், மற்றும் பிற ரெண்டரிங் தொடர்பான செயல்திறன் சிக்கல்களைக் கண்டறியவும் உங்களை அனுமதிக்கிறது. "Paint flashing" மற்றும் "Layout Shift Regions" போன்ற அம்சங்கள் மிகவும் பயனுள்ளதாக இருக்கும்.

செயல்திறன் கண்காணிப்புக் கருவிகள்

பல மூன்றாம் தரப்பு செயல்திறன் கண்காணிப்புக் கருவிகள் நிஜ உலக சூழ்நிலைகளில் உங்கள் செயலியின் செயல்திறன் பற்றிய நுண்ணறிவுகளை வழங்க முடியும். இந்த கருவிகள் பெரும்பாலும் பின்வரும் அம்சங்களை வழங்குகின்றன:

• உண்மையான பயனர் கண்காணிப்பு (RUM): உண்மையான பயனர்களிடமிருந்து செயல்திறன் தரவைச் சேகரித்தல், இது பயனர் அனுபவத்தின் மிகவும் துல்லியமான பிரதிநிதித்துவத்தை வழங்குகிறது.
• பிழை கண்காணிப்பு (Error Tracking): செயல்திறனைப் பாதிக்கக்கூடிய ஜாவாஸ்கிரிப்ட் பிழைகளைக் கண்டறிந்து கண்காணிக்கவும்.
• செயல்திறன் எச்சரிக்கைகள் (Performance Alerts): செயல்திறன் அளவீடுகள் முன் வரையறுக்கப்பட்ட வரம்புகளை மீறும் போது அறிவிக்கப்படுவதற்கு எச்சரிக்கைகளை அமைக்கவும்.

செயல்திறன் கண்காணிப்புக் கருவிகளின் எடுத்துக்காட்டுகளில் New Relic, Sentry, மற்றும் Datadog ஆகியவை அடங்கும்.

உதாரணம்: ஒரு சிக்கலைக் கண்டறிய ரியாக்ட் ப்ரொஃபைலரைப் பயன்படுத்துதல்

நீங்கள் ஒரு பெரிய உருப்படிகளின் பட்டியலை ரெண்டர் செய்யும் ஒரு சிக்கலான காம்பொனென்ட்டைக் கொண்டிருப்பதாக கற்பனை செய்து பாருங்கள். இந்தப் பட்டியலில் ஸ்க்ரோல் செய்வது சீரற்றதாகவும், வினைத்திறன் அற்றதாகவும் இருப்பதாக பயனர்கள் புகாரளிக்கின்றனர்.

1. பட்டியலில் ஸ்க்ரோல் செய்யும்போது ஒரு அமர்வைப் பதிவு செய்ய ரியாக்ட் ப்ரொஃபைலரைப் பயன்படுத்தவும்.
2. ப்ரொஃபைலரில் உள்ள தரவரிசைப்படுத்தப்பட்ட விளக்கப்படத்தை (ranked chart) பகுப்பாய்வு செய்யவும். `ListItem` என்ற ஒரு குறிப்பிட்ட காம்பொனென்ட், பட்டியலிலுள்ள ஒவ்வொரு உருப்படிக்கும் ரெண்டர் செய்ய தொடர்ந்து அதிக நேரம் எடுத்துக்கொள்வதை நீங்கள் கவனிக்கிறீர்கள்.
3. `ListItem` காம்பொனென்டின் குறியீட்டை ஆய்வு செய்யுங்கள். தரவு மாறாவிட்டாலும் கூட, ஒவ்வொரு ரெண்டரிலும் அது ஒரு கணக்கீட்டு ரீதியாக அதிக செலவுள்ள கணக்கீட்டைச் செய்வதை நீங்கள் கண்டறிகிறீர்கள்.

இந்த பகுப்பாய்வு உங்களை உங்கள் குறியீட்டின் ஒரு குறிப்பிட்ட பகுதிக்கு சுட்டிக்காட்டுகிறது, அது மேம்படுத்தப்பட வேண்டும். இந்த விஷயத்தில், அதிக செலவுள்ள கணக்கீட்டை மெமோயிஸ் செய்ய நீங்கள் `useMemo`-ஐப் பயன்படுத்தலாம், அது தேவையற்ற முறையில் மீண்டும் இயக்கப்படுவதைத் தடுக்கிறது.

ஃபிரேம் டிராப்பிங்கை தணிப்பதற்கான உத்திகள்

ஃபிரேம் டிராப்பிங்கிற்கான காரணங்களைக் கண்டறிந்ததும், இந்த சிக்கல்களைத் தணிக்கவும் செயல்திறனை மேம்படுத்தவும் பல்வேறு உத்திகளை நீங்கள் செயல்படுத்தலாம்:

1. காம்பொனென்ட் புதுப்பிப்புகளை மேம்படுத்துதல்

• மெமோயிசேஷன் (Memoization): காம்பொனென்ட்களின் தேவையற்ற ரீ-ரெண்டர்கள் மற்றும் அதிக செலவுள்ள கணக்கீடுகளைத் தடுக்க `React.memo`, `useMemo`, மற்றும் `useCallback` ஆகியவற்றைப் பயன்படுத்தவும். எதிர்பாராத நடத்தையைத் தவிர்க்க உங்கள் டிபென்டென்சி அரேக்கள் சரியாகக் குறிப்பிடப்பட்டுள்ளன என்பதை உறுதிப்படுத்தவும்.
• விர்ச்சுவலைசேஷன் (Virtualization): பெரிய பட்டியல்கள் அல்லது அட்டவணைகளுக்கு, `react-window` அல்லது `react-virtualized` போன்ற விர்ச்சுவலைசேஷன் லைப்ரரிகளைப் பயன்படுத்தி தெரியும் உருப்படிகளை மட்டும் ரெண்டர் செய்யவும். இது தேவைப்படும் DOM கையாளுதலின் அளவைக் கணிசமாகக் குறைக்கிறது.
• குறியீடு பிரித்தல் (Code Splitting): உங்கள் செயலியைத் தேவைக்கேற்ப ஏற்றக்கூடிய சிறிய பகுதிகளாகப் பிரிக்கவும். இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைத்து, செயலியின் வினைத்திறனை மேம்படுத்துகிறது. காம்பொனென்ட்-நிலை குறியீடு பிரிப்பிற்கு React.lazy மற்றும் Suspense-ஐப் பயன்படுத்தவும், மற்றும் ரூட்-அடிப்படையிலான குறியீடு பிரிப்பிற்கு Webpack அல்லது Parcel போன்ற கருவிகளைப் பயன்படுத்தவும்.
• இம்யூட்டபிலிட்டி (Immutability): தேவையற்ற ரீ-ரெண்டர்களைத் தூண்டக்கூடிய தற்செயலான மாற்றங்களைத் தவிர்க்க இம்யூட்டபிள் தரவு கட்டமைப்புகளைப் பயன்படுத்தவும். Immer போன்ற லைப்ரரிகள் இம்யூட்டபிள் தரவுகளுடன் வேலை செய்வதை எளிதாக்க உதவும்.

2. அதிக செலவுள்ள கணக்கீடுகளைக் குறைத்தல்

• டிபவுன்சிங் மற்றும் த்ராட்லிங் (Debouncing and Throttling): நிகழ்வு கையாளுபவர்கள் அல்லது API அழைப்புகள் போன்ற அதிக செலவுள்ள செயல்பாடுகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் மற்றும் த்ராட்லிங்கைப் பயன்படுத்தவும். இது அடிக்கடி புதுப்பிப்புகளால் செயலி அதிகமாகச் செயல்படுவதைத் தடுக்கிறது.
• வெப் வொர்க்கர்கள் (Web Workers): கணக்கீட்டு ரீதியாக தீவிரமான பணிகளை வெப் வொர்க்கர்களுக்கு நகர்த்தவும், அவை ஒரு தனி த்ரெட்டில் இயங்குகின்றன மற்றும் மெயின் த்ரெட்டைத் தடுக்காது. இது பின்னணிப் பணிகள் செய்யப்படும்போது UI வினைத்திறனுடன் இருக்க அனுமதிக்கிறது.
• கேச்சிங் (Caching): அடிக்கடி அணுகப்படும் தரவைக் கேச் செய்து, ஒவ்வொரு ரெண்டரிலும் அதை மீண்டும் கணக்கிடுவதைத் தவிர்க்கவும். அடிக்கடி மாறாத தரவைச் சேமிக்க இன்-மெமரி கேச்கள் அல்லது லோக்கல் ஸ்டோரேஜைப் பயன்படுத்தவும்.

3. DOM கையாளுதலை மேம்படுத்துதல்

• நேரடி DOM கையாளுதலைக் குறைத்தல்: ரியாக்டின் ரெண்டரிங் சுழற்சிக்கு வெளியே DOM-ஐ நேரடியாகக் கையாளுவதைத் தவிர்க்கவும். நிலைத்தன்மை மற்றும் செயல்திறனை உறுதிப்படுத்த, முடிந்தவரை ரியாக்ட் DOM புதுப்பிப்புகளைக் கையாளட்டும்.
• தொகுப்பு புதுப்பிப்புகள் (Batch Updates): பல புதுப்பிப்புகளை ஒரே ரெண்டரில் தொகுக்க `ReactDOM.flushSync`-ஐப் பயன்படுத்தவும் (நிதானமாகவும் கவனமாகவும் பயன்படுத்தவும்!). ஒரே நேரத்தில் பல DOM மாற்றங்களைச் செய்யும்போது இது செயல்திறனை மேம்படுத்தலாம்.

4. நீண்ட நேரம் இயங்கும் பணிகளை நிர்வகித்தல்

• ஒத்திசைவற்ற செயல்பாடுகள் (Asynchronous Operations): மெயின் த்ரெட்டைத் தடுப்பதைத் தவிர்க்க `async/await` மற்றும் Promises போன்ற ஒத்திசைவற்ற செயல்பாடுகளைப் பயன்படுத்தவும். நெட்வொர்க் கோரிக்கைகள் மற்றும் பிற I/O செயல்பாடுகள் ஒத்திசைவற்ற முறையில் செய்யப்படுவதை உறுதிப்படுத்தவும்.
• RequestAnimationFrame: அனிமேஷன்கள் மற்றும் பிற காட்சி புதுப்பிப்புகளைத் திட்டமிட `requestAnimationFrame`-ஐப் பயன்படுத்தவும். இது புதுப்பிப்புகள் பிரவுசரின் புதுப்பிப்பு விகிதத்துடன் ஒத்திசைக்கப்படுவதை உறுதி செய்கிறது, இது மென்மையான அனிமேஷன்களுக்கு வழிவகுக்கிறது.

5. மூன்றாம் தரப்பு லைப்ரரிகளை மேம்படுத்துதல்

• லைப்ரரிகளை கவனமாகத் தேர்ந்தெடுங்கள்: நன்கு மேம்படுத்தப்பட்ட மற்றும் அவற்றின் செயல்திறனுக்காக அறியப்பட்ட மூன்றாம் தரப்பு லைப்ரரிகளைத் தேர்ந்தெடுக்கவும். வீங்கிய அல்லது செயல்திறன் சிக்கல்களின் வரலாற்றைக் கொண்ட லைப்ரரிகளைத் தவிர்க்கவும்.
• லைப்ரரிகளை சோம்பேறித்தனமாக ஏற்றுதல் (Lazy Load Libraries): மூன்றாம் தரப்பு லைப்ரரிகளை முன்கூட்டியே ஏற்றுவதற்குப் பதிலாக, தேவைக்கேற்ப ஏற்றவும். இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைத்து, செயலியின் ஒட்டுமொத்த செயல்திறனை மேம்படுத்துகிறது.
• லைப்ரரிகளை தவறாமல் புதுப்பிக்கவும்: செயல்திறன் மேம்பாடுகள் மற்றும் பிழைத் திருத்தங்களிலிருந்து பயனடைய உங்கள் மூன்றாம் தரப்பு லைப்ரரிகளைப் புதுப்பித்த நிலையில் வைத்திருக்கவும்.

6. சாதனத் திறன்கள் மற்றும் நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்ளுதல்

• தகவமைப்பு ரெண்டரிங் (Adaptive Rendering): சாதனத்தின் திறன்கள் மற்றும் நெட்வொர்க் நிலைமைகளின் அடிப்படையில் UI-இன் சிக்கலான தன்மையை சரிசெய்ய தகவமைப்பு ரெண்டரிங் நுட்பங்களைச் செயல்படுத்தவும். எடுத்துக்காட்டாக, குறைந்த சக்திவாய்ந்த சாதனங்களில் படங்களின் தெளிவுத்திறனைக் குறைக்கலாம் அல்லது அனிமேஷன்களை எளிதாக்கலாம்.
• நெட்வொர்க் மேம்படுத்தல்: தாமதத்தைக் குறைக்கவும் ஏற்றுதல் நேரங்களை மேம்படுத்தவும் உங்கள் செயலியின் நெட்வொர்க் கோரிக்கைகளை மேம்படுத்தவும். உள்ளடக்க விநியோக நெட்வொர்க்குகள் (CDNs), பட மேம்படுத்தல் மற்றும் HTTP கேச்சிங் போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• முற்போக்கான மேம்பாடு (Progressive Enhancement): முற்போக்கான மேம்பாட்டை மனதில் கொண்டு உங்கள் செயலியை உருவாக்குங்கள், இது பழைய அல்லது குறைந்த திறன் கொண்ட சாதனங்களில் கூட ஒரு அடிப்படை அளவிலான செயல்பாட்டை வழங்குவதை உறுதி செய்கிறது.

உதாரணம்: மெதுவான பட்டியல் காம்பொனென்ட்டை மேம்படுத்துதல்

மெதுவான பட்டியல் காம்பொனென்ட்டின் உதாரணத்திற்கு மீண்டும் வருவோம். `ListItem` காம்பொனென்ட்டை ஒரு தடையாகக் கண்டறிந்த பிறகு, நீங்கள் பின்வரும் மேம்படுத்தல்களைப் பயன்படுத்தலாம்:

1. `ListItem` காம்பொனென்ட்டை மெமோயிஸ் செய்தல்: உருப்படியின் தரவு மாறாதபோது ரீ-ரெண்டர்களைத் தடுக்க `React.memo`-ஐப் பயன்படுத்தவும்.
2. அதிக செலவுள்ள கணக்கீட்டை மெமோயிஸ் செய்தல்: அதிக செலவுள்ள கணக்கீட்டின் முடிவைக் கேச் செய்ய `useMemo`-ஐப் பயன்படுத்தவும்.
3. பட்டியலை விர்ச்சுவலைஸ் செய்தல்: தெரியும் உருப்படிகளை மட்டும் ரெண்டர் செய்ய `react-window` அல்லது `react-virtualized`-ஐப் பயன்படுத்தவும்.

இந்த மேம்படுத்தல்களைச் செயல்படுத்துவதன் மூலம், நீங்கள் பட்டியல் காம்பொனென்டின் செயல்திறனை கணிசமாக மேம்படுத்தலாம் மற்றும் ஃபிரேம் டிராப்பிங்கைக் குறைக்கலாம்.

உலகளாவிய பரிசீலனைகள்

உலகளாவிய பார்வையாளர்களுக்காக ரியாக்ட் செயலிகளை மேம்படுத்தும்போது, நெட்வொர்க் தாமதம், சாதனத் திறன்கள் மற்றும் மொழி உள்ளூராக்கம் போன்ற காரணிகளைக் கருத்தில் கொள்வது அவசியம்.

• நெட்வொர்க் தாமதம்: உலகின் வெவ்வேறு பகுதிகளில் உள்ள பயனர்கள் வெவ்வேறு நெட்வொர்க் தாமதங்களை அனுபவிக்கலாம். உங்கள் செயலியின் சொத்துக்களை உலகளவில் விநியோகிக்கவும் தாமதத்தைக் குறைக்கவும் CDNs-ஐப் பயன்படுத்தவும்.
• சாதனத் திறன்கள்: பயனர்கள் பழைய ஸ்மார்ட்போன்கள் மற்றும் குறைந்த செயலாக்க சக்தி கொண்ட டேப்லெட்டுகள் உட்பட பல்வேறு சாதனங்களிலிருந்து உங்கள் செயலியை அணுகலாம். பலதரப்பட்ட சாதனத் திறன்களுக்கு உங்கள் செயலியை மேம்படுத்துங்கள்.
• மொழி உள்ளூராக்கம்: உங்கள் செயலி வெவ்வேறு மொழிகள் மற்றும் பிராந்தியங்களுக்குச் சரியாக உள்ளூர்மயமாக்கப்பட்டுள்ளதா என்பதை உறுதிப்படுத்தவும். இதில் உரையை மொழிபெயர்ப்பது, தேதிகள் மற்றும் எண்களை வடிவமைப்பது, மற்றும் வெவ்வேறு எழுதும் திசைகளுக்கு இடமளிக்க UI-ஐத் தழுவுதல் ஆகியவை அடங்கும்.

முடிவுரை

ஃபிரேம் டிராப்பிங் ரியாக்ட் செயலிகளின் பயனர் அனுபவத்தை கணிசமாகப் பாதிக்கலாம். ஃபிரேம் டிராப்பிங்கிற்கான காரணங்களைப் புரிந்துகொண்டு இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள உத்திகளைச் செயல்படுத்துவதன் மூலம், கன்கரென்ட் ரெண்டரிங் மூலம் கூட, மென்மையான மற்றும் வினைத்திறன் மிக்க செயல்திறனுக்காக உங்கள் செயலிகளை மேம்படுத்தலாம். உங்கள் செயலியைத் தவறாமல் ப்ரொஃபைல் செய்வது, செயல்திறன் அளவீடுகளைக் கண்காணிப்பது, மற்றும் நிஜ உலகத் தரவுகளின் அடிப்படையில் உங்கள் மேம்படுத்தல் உத்திகளைத் தழுவுவது ஆகியவை காலப்போக்கில் உகந்த செயல்திறனைப் பராமரிக்க முக்கியமானவை. உலகளாவிய பார்வையாளர்களைக் கருத்தில் கொண்டு, பல்வேறு நெட்வொர்க் நிலைமைகள் மற்றும் சாதனத் திறன்களுக்கு மேம்படுத்த மறக்காதீர்கள்.

காம்பொனென்ட் புதுப்பிப்புகளை மேம்படுத்துதல், அதிக செலவுள்ள கணக்கீடுகளைக் குறைத்தல், DOM கையாளுதலை மேம்படுத்துதல், நீண்ட நேரம் இயங்கும் பணிகளை நிர்வகித்தல், மூன்றாம் தரப்பு லைப்ரரிகளை மேம்படுத்துதல், மற்றும் சாதனத் திறன்கள் மற்றும் நெட்வொர்க் நிலைமைகளைக் கருத்தில் கொள்வதில் கவனம் செலுத்துவதன் மூலம், நீங்கள் உலகெங்கிலும் உள்ள பயனர்களுக்கு ஒரு உயர்ந்த பயனர் அனுபவத்தை வழங்க முடியும். மேம்படுத்துதலுக்கு வாழ்த்துக்கள்!